<template>
  <view class="container">
    <view class="wish-card">
      <view class="wish-header">
        <view class="wish-title">{{ wish.title }}</view>
        <u-tag 
          :text="getStatusTag(wish.status).text" 
          :type="getStatusTag(wish.status).type"
        ></u-tag>
      </view>
      
      <view class="wish-progress">
        <view class="progress-text">
          <text>完成进度</text>
          <text>{{ wish.progress }}%</text>
        </view>
        <u-line-progress 
          :percentage="wish.progress" 
          :showText="false" 
          height="16" 
          :activeColor="getProgressColor(wish.progress)"
        ></u-line-progress>
      </view>
      
      <view class="wish-content">
        <view class="content-item">
          <view class="item-label">愿望描述</view>
          <view class="item-value">{{ wish.description || '暂无描述' }}</view>
        </view>
        
        <view class="content-item" v-if="wish.estimated_time">
          <view class="item-label">预计实现时间</view>
          <view class="item-value">{{ formatDate(wish.estimated_time) }}</view>
        </view>
        
        <view class="content-item">
          <view class="item-label">创建时间</view>
          <view class="item-value">{{ formatDate(wish.create_time) }}</view>
        </view>
        
        <view class="content-item">
          <view class="item-label">更新时间</view>
          <view class="item-value">{{ formatDate(wish.update_time) }}</view>
        </view>
      </view>
    </view>
    
    <view class="progress-card">
      <view class="progress-title">更新进度</view>
      <view class="progress-slider">
        <text class="slider-value">{{ progressValue }}%</text>
        <u-slider 
          v-model="progressValue" 
          :step="5" 
          :blockSize="28"
        ></u-slider>
      </view>
      <u-button type="primary" @click="updateProgress">保存进度</u-button>
    </view>
    
    <view class="action-buttons">
      <u-button type="primary" @click="goEdit">编辑</u-button>
      <u-button type="error" @click="confirmDelete">删除</u-button>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { formatDate } from '@/utils/date'

export default {
  data() {
    return {
      id: null,
      progressValue: 0
    }
  },
  computed: {
    ...mapGetters({
      wish: 'wish/currentWish'
    })
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id
      this.loadData()
    } else {
      uni.showToast({
        title: '参数错误',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },
  methods: {
    ...mapActions('wish', ['getWishDetail', 'updateWishProgress', 'deleteWish']),
    formatDate,
    
    // 加载数据
    async loadData() {
      uni.showLoading({
        title: '加载中...'
      })
      
      try {
        await this.getWishDetail(this.id)
        this.progressValue = this.wish.progress || 0
      } catch (error) {
        console.error('加载数据失败', error)
        uni.showToast({
          title: '加载失败',
          icon: 'none'
        })
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } finally {
        uni.hideLoading()
      }
    },
    
    // 获取状态标签
    getStatusTag(status) {
      switch (parseInt(status)) {
        case 0:
          return { text: '未开始', type: 'info' }
        case 1:
          return { text: '进行中', type: 'warning' }
        case 2:
          return { text: '已实现', type: 'success' }
        default:
          return { text: '未知', type: 'info' }
      }
    },
    
    // 获取进度条颜色
    getProgressColor(progress) {
      if (progress >= 100) return '#19be6b'
      if (progress >= 50) return '#2979ff'
      return '#ff9900'
    },
    
    // 更新进度
    async updateProgress() {
      uni.showLoading({
        title: '更新中...'
      })
      
      try {
        await this.updateWishProgress({
          id: this.id,
          progress: this.progressValue
        })
        
        uni.showToast({
          title: '进度已更新',
          icon: 'success'
        })
      } catch (error) {
        console.error('更新进度失败', error)
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    // 去编辑页面
    goEdit() {
      uni.navigateTo({
        url: `/pages/wish/edit?id=${this.id}`
      })
    },
    
    // 确认删除
    confirmDelete() {
      uni.showModal({
        title: '提示',
        content: '确定要删除该愿望记录吗？',
        success: async (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '删除中...'
            })
            
            try {
              await this.deleteWish(this.id)
              uni.showToast({
                title: '删除成功',
                icon: 'success'
              })
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            } catch (error) {
              console.error('删除失败', error)
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              })
            } finally {
              uni.hideLoading()
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
}

.wish-card, .progress-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.wish-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.wish-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.wish-progress {
  margin-bottom: 30rpx;
}

.progress-text {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.wish-content {
  padding: 10rpx 0;
}

.content-item {
  margin-bottom: 30rpx;
}

.item-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.item-value {
  font-size: 30rpx;
  color: #333;
  line-height: 1.6;
}

.progress-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.progress-slider {
  margin-bottom: 30rpx;
  position: relative;
  padding: 0 20rpx;
}

.slider-value {
  position: absolute;
  top: -50rpx;
  right: 20rpx;
  font-size: 28rpx;
  color: #2979ff;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
}

.u-button {
  width: 45%;
}
</style> 